import React from 'react'
import { Image, Typography } from 'antd'
import { withRouter, RouteComponentProps, Link } from 'react-router-dom'

interface PropsType extends RouteComponentProps {
	id: string | number
	size: 'large' | 'small'
	imageSrc: string
	price: number | string
	title: string
}

const ProductImageComponent: React.FC<PropsType> = ({
	id,
	size,
	imageSrc,
	price,
	title,
}) => {
	return (
		<Link to={`detail/${id}`}>
			{size == 'large' ? (
				<Image src={imageSrc} height={285} width={490}></Image>
			) : (
				<Image src={imageSrc} height={120} width={240}></Image>
			)}
			<div>
				<Typography.Text type="secondary">{title.slice(0, 25)}</Typography.Text>
				<Typography.Text type="danger" strong>
					￥ {price} 起
				</Typography.Text>
			</div>
		</Link>
	)
}

export const ProductImage = withRouter(ProductImageComponent)
